<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info>p{
            padding:5px 3px;
            margin: 0;
        }
        /* 最外层块元素 */
        #div2{
            width: 560px;
            height: 400px;
            margin: 0 auto;
            border: solid 1px red;
            overflow: auto;
            background-color: antiquewhite;
            border-radius: 15px;
            box-shadow: 5px 5px 10px;
        }
        /* 头像 */
        #head{
            width: 0;
            height: 0;
            border: solid 70px transparent;
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 30px;
            background-image: url("../img/boy.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 140px 140px;
            box-shadow: 3px 3px 7px;
            /* overflow: hidden; */
        }
        /* 姓名介绍 */
        #info{
            width: 280px;
            text-align: center;
            margin: 0 auto;
            border: solid 0px red;
        }
        /* 蓝色按钮 */
        .blue{
            background-color: blue;
            color: white;
            font-size: 18;
            padding-bottom: 15px;
            border-radius: 5px;
        }
        /* 绿色按钮 */
        .green{
            background-color: green;
            color: white;
            padding-bottom: 15px;
            border-radius: 5px;
        }
        /* 红色按钮 */
        .red{
            background-color: red;
            color: white;
            padding-bottom: 15px;
            border-radius: 5px;
        }
        /* 三个按钮的外部div */
        .botton{
            width: 448px;
            border: solid 0px green;
            margin: 0 auto;
            margin-top: 10px;
            overflow: hidden;
            margin-right: 47px;
        }
        /* 三个按钮共同属性 */
        .botton>div{
            width: 140px;
            height: 35px;
            border: solid 0px blue;
            text-align: center;
            line-height: 19px;
            float: left;
            margin-right: 7px;
        }
        /* ----------------------------------------------------------- */
        #div1{
            width: 70px;
            height: 35px;
            border: solid 0px red;
            overflow: hidden;
            background-color: #666;
            line-height: 35px;
            text-align: left;
            position: relative;
            border-radius: 3px;
        }
        .logo{
            /* padding-top: 0; */
            /* margin-top: -29px; */
            width: 0;
            height: 0;
            border: 10px solid black;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            position: absolute;
            right: 10px;
            top: 40%;
            /* display: inline-block; */
        }

        #div1 .button{
            padding: 0;
            margin: 0;
            line-height: 35px;
            position: absolute;
            left: 5px;
        }
        #div1:hover{
            width: 70px;
            height: 35px;
            border: solid 0px red;
            overflow: hidden;
            background-color: #ccc;
            line-height: 35px;
            text-align: left;
            position: relative;
        }
        /* ------------------------------------------------------------------------- */
        ul{
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        #nav{
            border: solid 0px red;
            margin: 0 auto;
            width: 400px;
            margin-top: 50px;
            /* 清除浮动 */
            overflow: hidden;
            text-align: center;
        }
        #nav>.tip{
            float: left;
        }
        #nav>ul{
            float: left;
        }
        #nav>ul>li{
            float: left;
            padding: 2px 0;
            margin: 0 13px;
        }
        #nav>ul>li{
            text-decoration: none;
            color: black;
            padding: 0 5px;
        }
        #nav>ul>li:hover{
            background-color: #f01400;
            color: #fff;
        }
        

    </style>
</head>
<body>
    <div id="div1">
        <p class="button">上海</p>
        <div class="logo"></div>
    </div>

    <div id="div2">
        <div id="head">
            <!-- <img src="../img/boy.png" alt=""> -->
        </div>
        <div id="info">
            <h4>IsConor</h1>
            <p>Web前端工程师</p>
            <p>男.北京市</p>
            <p>这位同学很懒，什么也没有留下...!</p>
        </div>
        <div class="botton">
            <div class="blue"><p>访问主页</p></div>
            <div class="green"><p>发消息</p></div>
            <div class="red"><p>删除好友</p></div>
        </div>
    </div>
    <div id="nav">
        <div class="tip">难度：</div>
        <ul>
            <li>全部</li>
            <li>初级</li>
            <li>中级</li>
            <li>高级</li>
        </ul>

        <!-- 实现点击按钮在控制台输出 -->
        <button onclick="console.log('hello world');">点击</button>
        
    </div>
</body>
</html>